<template>
  <div class="home">
    <router-view class="absolute"></router-view>
    <van-tabbar v-model="active" placeholder fixed safe-area-inset-bottom>
      <van-tabbar-item v-for="(v, i) in tabArr" :key="i" replace :to="v.to">
        {{ v.name }}
        <template #icon="{ active }">
          <img :src="active ? v.iconActive : v.icon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        active: 0,
        tabArr: [
          {
            name: '钱包',
            to: '/wallet',
            icon: require('./imgs/qb@2x.png'),
            iconActive: require('./imgs/qb_press@2x.png'),
          },
          {
            name: '矿机',
            to: '/mill',
            icon: require('./imgs/kj@2x.png'),
            iconActive: require('./imgs/kj_press@2x.png'),
          },
          {
            name: '我的',
            to: '/my',
            icon: require('./imgs/wode@2x.png'),
            iconActive: require('./imgs/wode_press@2x.png'),
          },
        ],
      }
    },
    created() {
      this.active = this.tabArr.findIndex((e) => e.to === this.$route.path)
    },
    methods: {},
  }
</script>
<style lang="less" scoped>
  .home {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .absolute {
      flex: 1;
      overflow-y: scroll;
    }
    /deep/.van-tabbar__placeholder {
      -webkit-user-select: none !important; /*webkit浏览器*/

      -khtml-user-select: none !important; /*早期浏览器*/

      -moz-user-select: none !important; /*火狐*/

      -ms-user-select: none !important; /*IE10*/

      user-select: none !important;
      .van-tabbar--fixed {
        box-sizing: content-box !important;
      }
    }
  }
</style>
